{%  extends "./public/base.html"  %}

{% block 'css' %}
    <link rel="stylesheet" type="text/css" href="/static/home/public/css/list.css">
    <link rel="stylesheet" type="text/css" href="/static/home/public/css/list-app.css">
{% endblock %}

{% block 'con' %}
<div class="mainlist app-list">
    <div class="container">
      <!-- 面包屑 导航 -->
      <div class="ml-nav hidden-xs hidden-sm">
            <ol class="breadcrumb">
              <li><a href="./index.html">首页</a></li>
              <!-- 判断是否有pname属性 -->
              <li><a href="#">
                {% if lists.pname %}
                  {{ lists.pname.name }}
                {% else %}
                  {{ lists.name }}
                {% endif %}
              </a></li>

            </ol>
      </div>
      <!-- 面包屑 导航 E-->
      <!-- 分类列表 -->
      <div class="selector hidden-xs hidden-sm">
      <div class="sl-category">
        <div class="sl-line-wrap clearfix">
          <div class="mod-key">分类：</div>
          <div class="mod-value">
            <div class="mod-value-list">
              <ul>
                <li class="">
                  <a href="javascript:void(0)" title="全部">全部</a>
                </li>
                {% if lists.pname %}
	                <li class="">
	                  <a style="color:#00c3f5" href="{% url 'lists' lists.id %}" title="{{lists.name}}">{{lists.name}}</a>
	                </li>
	                {% for v in lists.siblings %}
	                <li class="">
	                  <a href="{% url 'lists' v.id %}" title="{{v.name}}">{{v.name}}</a>
	                </li>
	                {% endfor %}
	            {% else %}
	            	{% for v in lists.sub %}
	            	 <li class="">
	                  <a href="{% url 'lists' v.id %}" title="{{v.name}}">{{v.name}}</a>
	                </li>
	                {% endfor %}
	            {% endif %}

              </ul>
            </div>
          </div>
        </div>
       
      </div>
      <!-- 分类列表 E -->

      <!-- 分类导航 -->
      <div class="filter clearfix hidden-xs hidden-sm" style="display:block">
        <div class="filter-order">
          <a class="active" data-tag="0" data-mtype="store_list_sx_1" href="javascript:void(0);">
              推荐
          </a>
          <a data-tag="1" data-mtype="store_list_sx_2" href="javascript:void(0);">
              新品
          </a>
          <a data-tag="2" data-mtype="store_list_sx_3" href="javascript:void(0);">
              价格<i class="icon-arrow-down"></i>
          </a>
        </div>
        <div class="filter-condition">
          <label class="bs-checkbox" data-mtype="store_list_sx_xz">
              <i></i>仅显示有货商品
          </label>
        </div>
      </div>
      <!-- 分类导航 E -->

      <!-- 商品列表 -->
     <div class="goods-list">
        <div class="row">
          
          <!-- 判断 是否有 pname  -->
          {% if lists.pname %}
            <!-- 一个循环 -->
            {% for v in lists.sub %}
            <div class="col-md-3 col-sm-6 col-xs-6">
              <div class="gl-item">
                <div class="compare-btn-list" style="display: none;">
                    <i class="iconfont  icon-duibi compare-duibi"></i>
                    <span class="hidden-xs hidden-sm">对比</span>
                </div>
                <div class="gl-item-wrap">
                  <!-- Tab panes -->
                  <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active mod-pic" id="list-p1">
                      <a href="./meilanx.html">
                        <img class="lazy j-modProduct" src="/static/public/img/{{ v.pic }}" style="height: 200px;">
                      </a>
                    </div>
                  </div>
                 
                  <h2>{{ v.title }}</h2>
                  <dd class="mod-price">
                      <span>￥</span>
                      <span class="vm-price">{{ v.price }}</span>
                      <span class="vm-start">起</span>
                  </dd>
                </div>
              </div>
            </div>
            {% endfor %}

          {% else %}
            <!-- 两个循环 -->
            {% for x in lists.sub %}
              {% for xx in x.sub %}
              <div class="col-md-3 col-sm-6 col-xs-6">
                <div class="gl-item">
                  <div class="compare-btn-list" style="display: none;">
                      <i class="iconfont  icon-duibi compare-duibi"></i>
                      <span class="hidden-xs hidden-sm">对比</span>
                  </div>
                  <div class="gl-item-wrap">
                    <!-- Tab panes -->
                    <div class="tab-content">
                      <div role="tabpanel" class="tab-pane active mod-pic" id="list-p1">
                        <a href="./meilanx.html">
                          <img class="lazy j-modProduct" src="/static/public/img/{{ xx.pic }}" style="height: 200px;">
                        </a>
                      </div>
                    </div>
                   
                    <h2>{{ xx.title }}</h2>
                    <dd class="mod-price">
                        <span>￥</span>
                        <span class="vm-price">{{ xx.price }}</span>
                        <span class="vm-start">起</span>
                    </dd>
                  </div>
                </div>
              </div>

              {% endfor %}
            {% endfor %}

          {% endif %}
          
      
        </div>
    
      </div>
      <!-- 商品列表 -->
     

	</div>
</div>
{% endblock %}